<template>
  <div>
    <!--
      action: 设置图片上传接口地址，默认
      如果需要自定义上传的话，就要通过http-request属性覆盖action
      http-request：自定义上传图片的属性
      file-list：用于回显图片
     -->
    <el-upload
      action="#"
      list-type="picture-card"
      :file-list="fileList"
      :http-request="successFn"
      :on-remove="remove"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-progress v-show="fileList.length>1&& percentage!=100" :percentage="percentage" status="success" />
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
// cos存储对象初始化
// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKIDCAsINCjz0j9H7fvsXy83j8F5ctudI4vW',
  SecretKey: 'OUKtBCuKUMv71dxzjCSRAdqolbBWcTNG'
})
export default {
  data() {
    return {
      // 进度条
      percentage: 0,
      fileList: [

      ]
    }
  },
  methods: {
    // 选择头像成功时触发
    successFn(res) {
      // 添加对象要先push 属性否则图片不会显示出来
      // 因为vue检测不到后面添加的属性，因此需要提前添加
    //   this.fileList.push({ url: '' })
      // res: res就是我们上传的图片对象
      // 注意：我们上传给后端的对象是res.file
      // console.log(26, res)
      cos.putObject({
        Bucket: 'hr-yxh-1312874548', /* 必须 - 存储桶名字 */
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
        Key: Date.now().toString(), /* 必须 -- 上传的文件名 --- 字符串 */
        StorageClass: 'STANDARD',
        Body: res.file, // 上传文件对象
        onProgress: (progressData) => {
          console.log(JSON.stringify(progressData))
          this.percentage = progressData.percent * 100
        }
        // 修改成箭头函数，解决this的指向问题
      }, (err, data) => {
        // data.Location 就是腾讯云返回的图片在线地址
        // 注意：使用data.Location地址访问图片的时候需要拼接 http://
        if (!err) {
          console.log(err || data)
          //   this.fileList[0].url = 'http://' + data.Location
          //   this.fileList[1].url = 'http://' + data.Location
          this.fileList.push({ url: 'http://' + data.Location })
        }
      })
    },
    // 删除
    remove(file, fileList) {
      console.log(file, fileList, 73)
      console.log(this.fileList)
      // this.fileList.splice(0, 1)
      //   console.log(this.fileList)
      const obj = this.fileList.find(item => {
        return item
      })
      console.log(obj)
      this.fileList = this.fileList.filter(val => val.uid !== obj.uid)
      // 删除对应父组件的
    },
    // 关闭之后清除
    removeList() {
      this.fileList = []
    }
  }
}
</script>

<style lang="scss">
// .update {
//     width: 100px;
//     .el-upload--picture-card{
//         display: none;
//     }
// }

</style>
